<template>
  <el-card class="item">
    <template #header>
      <div class="card-header">
        <span>气压</span>
      </div>
    </template>
    <div id="pressure" ref="isMounted" style="width: 100%; height: 250px"></div>
  </el-card>
</template>
<script setup>
import { ref, watchEffect } from "vue";
import * as echarts from "echarts";
const isMounted = ref(null);
const props = defineProps({
    pressure:Array
})

const draw = () => {
  const chartDom = document.getElementById("pressure");
  const myChart = echarts.init(chartDom);
  var option;
  option = {
    legend: {
      top: "bottom",
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        // 减小半径范围
        radius: [30, 100], 
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        data: props.pressure,
      },
    ],
  };
  option && myChart.setOption(option);
};
watchEffect(() => {
  if (isMounted.value) {
    draw();
  }
});
</script>    